<template>
  <div>
    <Portal to="right-disable"
            :disabled="!queryModelDefaultSetting.showSetting">
      <div class='dropdown'>
        <el-card shadow="hover"
                 v-if="gadgetSetting.show">
          <p style='margin-bottom: 10px;'>
            <span v-if='"" !== gadgetSetting.name'
                  style='font-size:16px; font-weight: 600'>{{ gadgetSetting.name }}</span>
            <el-tooltip :open-delay="1000"
                        class="item"
                        effect="dark"
                        :content="gadgetSetting.description"
                        placement="right"
                        v-if='"" !== gadgetSetting.description'>
              <i class="cuifont icon_help_circle"
                 style='margin-left:5px;'></i>
            </el-tooltip>
          </p>
          <div class=control-section>
            <div class=content-wrapper
                 v-loading="loading"
                 style="width:100%">
              <el-input v-model="datesourceValue"
                         @input="keyWordsChange"
                         ref="codeinput"
                         @blur="compareCode"
                         clearable
                         :placeholder="gadgetSetting.watermark"></el-input>
            </div>
          </div>
        </el-card>
        <div class=control-section
             :style="{height: gadgetHeight + 'px'}"
             v-else>
          <div class=content-wrapper
               v-loading="loading"
               style="width:100%">
            <div class="dropdown-list-custom-css">
             <el-input v-model="datesourceValue"
                         @input="keyWordsChange"
                         clearable
                         ref="codeinput"
                         @blur="compareCode"
                         style="width: 90%;"
                         :placeholder="gadgetSetting.watermark"></el-input>
              <div class="dropdownpre" :style="{width:gadgetSetting.filterLabel.length===2?(gadgetSetting.filterLabel.length+0.5)*25+'px':gadgetSetting.filterLabel.length*25+'px'}"
                   v-if="gadgetSetting.filterLabel&&gadgetSetting.filterLabel.length>0">{{ gadgetSetting.filterLabel }}</div>
            </div>
          </div>
        </div>
      </div>
    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           @queryModelPreview="queryModelPreview"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import { defaultGadgetSettingList } from '@/utils/data-json'
import {
  getUrlQureyParams
} from '@/utils/common'
import { debounce } from 'lodash'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datesourceValue: '',
      gadgetSetting: {},
      value: null,
      gadgetStatus: 'init',
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetSettingExclude: ['DATA'],
          gadgetType: 'enterinputgadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'enterinputgadget' }).gadgetSetting
          // gadgetSetting: {
          //   watermark: 'Select a Client',
          //   filterPlaceholder: 'Search',
          //   queryParams: 'tenantCode',
          //   show: false,
          //   name: '',
          //   description: ''
          // }
        }
      },
      heightoffset: 60
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
  },
  activated () {

  },
  destroyed () {
    this.delQueryParam()
  },
  methods: {
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = newH * 20 - this.heightoffset - 15
      this.gadgetWidth = newWPx
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        pageId: this.pageId,
        gadgetId: this.id,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.config) {
          _self._.merge(_self.gadgetSetting, res.config)
        }

        _self.heightoffset = 5
        _self.gadgetHeight = (_self.gadgetInfo.h * 20) - _self.heightoffset - 15

        _self.updateGadgetStatus('ready') //! IMPORTANT must have this code in every gadget
        this.loading = false
      }).catch(() => {
        this.loading = false
      }).finally(() => {
        this.loading = false
        this.datesourceValue=getUrlQureyParams(this.gadgetSetting.queryParams)
        this.updateGadgetLoadingStatus(!this.loading)
        this.$nextTick(() => {
          this.compareCode()
        }, 1000)
      })
    },
    compareCode () {
      if (this.gadgetSetting.func) {
        if (this.gadgetSetting.func.input_type === 'code') {
          this.$nextTick(() => {
            this.$refs.codeinput.focus()
          })
        }
      }
    },
    keyWordsChange: debounce(function (e) {
      if (this.gadgetSetting.func.input_index === 0) {
        e = e.split('/')[0]
      }
      this.datesourceValue = e
      this.getDataListParams(e)
    }, 1000),
    getDataListParams (val) {
      var _self = this
      if (val) {
        _self.slicer[_self.gadgetSetting.queryParams] = val
        if (window.location.search.includes('name=')) {
          localStorage.setItem(_self.pageId + '-dropdown-list-gadget-' + _self.gadgetSetting.queryParams, val)
        } else {
          if (!window.location.search.includes('&')) {
            localStorage.setItem(_self.pageId + '-dropdown-list-gadget-' + _self.gadgetSetting.queryParams, val)
          }
        }
      } else {
        delete _self.slicer[_self.gadgetSetting.queryParams]
        if (window.location.search.includes('name=')) {
          localStorage.removeItem(_self.pageId + '-dropdown-list-gadget-' + _self.gadgetSetting.queryParams)
        } else {
          if (!window.location.search.includes('&')) {
            localStorage.removeItem(_self.pageId + '-dropdown-list-gadget-' + _self.gadgetSetting.queryParams)
          }
        }
        // _self.$message.error(_self.gadgetSetting.watermark)
      }

      this.updateGadgetStatus('ready')
    },
    activedAfterQuery: debounce(function () {
      var _self = this
      _self.updateGadgetStatus('ready')
    }, 0),
    delQueryParam () {
      delete this.slicer[this.gadgetSetting.queryParams]
    }
  }
})
</script>
<style scoped>
/* .el-card ::v-deep .el-card__body {
  padding: 5px 5px !important;
}
.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
} */
.cursor_pointer {
  cursor: pointer;
}
</style>
<style lang="scss">
.dropdown-list-custom-css {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  .dropdownpre {
    padding: 0 15px;
    border-right: none;
    display: flex;
    align-items: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .el-select {
    flex: 1;
  }
}
</style>
